{extend name="main" /}

{block name="body"}
{include file="breadcrumb" /}
<div class="layui-fluid">
    <div class="layui-card">
        <div class=" layui-card-header layuiadmin-card-header-auto">
            <form class="layui-form" method="get">
                <input type="hidden" name="bcid" value="{:input('bcid')}"><!--保留当前位置的bcid参数-->
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">关键字查询</label>
                        <div class="layui-input-inline">
                            <input type="text" name="title" placeholder="请输入关键字" value="{:input('title')}" autocomplete="off" class="layui-input" >
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">所属分类</label>
                        <div class="layui-input-inline">
                            <select name="cid">
                                <option value="">不限</option>
                                {foreach name='class_list' item='vo'}
                                <option value="{$vo.id}" {if condition="input('cid')!='' and (input('cid') eq $vo['id'])" } selected="selected" {/if}>{$vo._name|raw}</option>
                                {/foreach}
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">开始日期</label>
                        <div class="layui-input-inline">
                            <input type="text" name="start_date" id="start_date" value="{:input('start_date')}" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input" >
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">截止日期</label>
                        <div class="layui-input-inline">
                            <input type="text" name="end_date" id="end_date" value="{:input('end_date')}" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" lay-submit lay-filter="table-search">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <div class="layui-card-body">

            <!--Table 主体-->
            <table class="layui-hide" id="ID-table"></table>

            <!--操作栏模版-->
            <script type="text/html" id="toolbar">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm" lay-event="add">添加文章</button>
                    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除选中</button>
                </div>
            </script>

            <!--热门开关-->
            <script type="text/html" id="tpl-switch">
                <input type="checkbox" name="is_hot" value="{{= d.id }}" title="热|" lay-skin="switch" lay-filter="is_hot" {{= d.is_hot == 1 ? "checked" : "" }}>
            </script>

            <!--操作按钮-->
            <script type="text/html" id="tpl-other">
                <a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
                <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete">删除</a>
            </script>
        </div>
    </div>

</div>
{/block}

{block name="js"}
<script>
    layui.use(function(){
        var table = layui.table;
        var form = layui.form;

        //日期选择
        var laydate = layui.laydate;
        laydate.render({
            elem: '#start_date'
        });
        laydate.render({
            elem: '#end_date'
        });

        // 创建渲染实例
        table.render({
            elem: '#ID-table',
            url:"{:url('index')}",
            toolbar: '#toolbar',
            parseData: function(res){ // res 即为原始返回的数据
                return {
                    "code": 0, // 解析接口状态
                    "msg": res.msg, // 解析提示文本
                    "count": res.data.total, // 解析数据长度
                    "data": res.data.data // 解析数据列表
                };
            },
            page: true,
            limits: [10, 20, 50, 100],
            limit: 20,
            height: '640px',
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field:'id', fixed: 'left', width:80, title: 'ID', sort: true},
                {field:'title', title: '标题'},
                {field:'class_name', title: '分类', width:120, sort: true},
                {field:'view', title: '浏览', width:100, sort: true},
                {title: '热门', width:100, templet: '#tpl-switch'},
                {field:'create_time', width:180, title: '时间', sort: true},
                {title: '操作', width:160, toolbar: '#tpl-other'}
            ]]
        });

        // 搜索提交
        form.on('submit(table-search)', function(data){
            var field = data.field; // 获得表单字段
            // 执行搜索重载
            table.reload('ID-table', {
                page: {
                    curr: 1 // 重新从第 1 页开始
                },
                where: field // 搜索的字段
            });
            return false;
        });

        // 状态 - 开关操作
        form.on('switch(is_hot)', function(obj){
            var id = this.value;
            var val = this.checked ? 1 : 0;
            var url = "{:url('edit')}";
            $.post(url,{id:id,is_hot:val},function (res) {
                layer.tips(res.msg, obj.othis);
            },'json')
        });

        // 触发单元格工具事件
        table.on('tool(ID-table)', function(obj){
            var data = obj.data;
            if(obj.event === 'edit'){
                layer.open({
                    title: '编辑',
                    type: 2,
                    area: ['90%','94%'],
                    maxmin: true,
                    content: "{:url('edit')}?id="+data.id
                });
            } else if(obj.event === 'delete'){
                layer.confirm('确定要删除该信息吗？', {icon: 7}, function(index){
                    var url = "{:url('delete')}"
                    $.get(url,{id:data.id},function (res) {
                        if(res.code === 1){
                            obj.del();
                            layer.msg(res.msg, {icon: 1});
                        }else{
                            layer.msg(res.msg, {icon: 2});
                        }
                    },'json');
                    layer.close(index);
                });
            }
        });

        // 工具栏事件
        table.on('toolbar(ID-table)', function(obj){
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            switch(obj.event){
                case 'add':  //添加操作
                    layer.open({
                        title: '添加',
                        type: 2,
                        area: ['90%','94%'],
                        maxmin: true,
                        content: "{:url('add')}"
                    });
                    break;
                case 'delete': //选中删除操作
                    var data = checkStatus.data;
                    if(data.length === 0){
                        layer.msg('未选中数据', {icon: 2});
                        return;
                    }
                    var ids = [];
                    for (var i = 0; i < data.length; i++) {
                        ids.push(data[i].id)
                    }
                    layer.confirm('确定要删除选中信息吗？', {icon: 7}, function(index){
                        var url = "{:url('delete')}"
                        $.post(url,{id:ids},function (res) {
                            if(res.code === 1){
                                layer.msg(res.msg, {icon: 1});
                                table.reload(id);
                            }else{
                                layer.msg(res.msg, {icon: 2});
                            }
                        },'json');
                        layer.close(index);
                    })
                    break;
            }
        });
    });
</script>
{/block}